<template>
	<view class="form-wrapper">
		<view class="head-box">
			<view class="head-title">您是？</view>
			<view class="head-subtitle">第一次进入需要设置身份，用以绑定亲友关系</view>
		</view>
		<view 
      class="choise-box"
      :class="{'active': active === 'parent'}"
      @tap="handleChoiseIdentify('parent')"
    >
			<view class="img parent"></view>
			<view class="title">家长或亲友</view>
		</view>
    <view
      class="choise-box"
      :class="{'active': active === 'self'}"
      @tap="handleChoiseIdentify('self')"
    >
    	<view class="img self"></view>
    	<view class="title">我自己</view>
    </view>
    
    <view class="btn-groups-wrapper">
    	<button class="u-reset-button btn-primary" @tap="handleNext">下一步</button>
    </view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
    
export default {
	name: 'ChoiseIdentify',
  data() {
    return {
      active: 'parent',
    }
  },
	methods: {
    ...mapActions(['showAuthModal']),
		handleChoiseIdentify(active) {
      this.active = active
    },
    handleNext() {
      if (this.active === 'parent') {
        this.showAuthModal('bindChildren')
      } else {
        this.showAuthModal('bindSelf')
      }
    },
	}
};
</script>

<style lang="scss" scoped>
  @import './style.scss';
  
.form-wrapper {
	.choise-box {
    
    &.active {
      .img {
        &.parent {
          background-image: url('/static/images/login/choise-parent-active.png');
        }
        
        &.self {
          background-image: url('/static/images/login/choise-self-active.png');
        }
      }
      
      .title {
        color: $u-main-color;
      }
    }
    
    .img {
      margin: 50rpx auto 0;
      width: 240rpx;
      height: 240rpx;
      background-size: contain;
      
      &.parent {
        background-image: url('/static/images/login/choise-parent.png');
      }
      
      &.self {
        background-image: url('/static/images/login/choise-self.png');
      }
    }
    
    .title {
      font-size: 30rpx;
      font-weight: 500;
      color: #999999;
      margin-top: 20rpx;
      text-align: center;
    }
	}
	
}
</style>
